<div  ng-controller="DocumentListCtrl">
    <!-- toaster directive -->
    <toaster-container toaster-options="{'position-class': 'toast-top-right', 'close-button':true}"></toaster-container>
    <div class="app-content-body" infinite-scroll='scrollEvent()' infinite-scroll-disabled="isLoad" infinite-scroll-distance="0" >
        <div class="hbox hbox-auto-xs hbox-auto-sm"   >
            <div class="col w-md bg-light dk b-r bg-auto" >
                <div class="wrapper bg-light lter b-b">
                    <div class="input-group">
                        <input type="text" ng-model="searchValue"  ng-keydown="searchDocumentsAndFolders($event)"  class="form-control input-sm bg-light no-border rounded padder" placeholder="{{'document.searchDocuments'|translate}}...">
                              <span class="input-group-btn">
                                <button type="submit" class="btn btn-sm bg-light rounded" ng-click="searchDocumentsAndFolders()"><i class="fa fa-search"></i></button>
                              </span>
                    </div>
                </div>
                <div class="wrapper"  >
                    <div style="padding-left:10px;margin-bottom: 5px;"  >
                        <span class="text-info" > <div style="padding-top:10px;padding-bottom:5px;"  ><b ><i class="fa fa-angle-down" ></i>&nbsp;&nbsp;{{'document.publicDirectory'|translate}}</b></div></span>
                        <abn-tree
                                tree-data         = "folders"
                                tree-control      = "folders_tree"
                                on-select         = "folder_handler(branch)"
                                initial-selection = "{{folder}}"
                                expand-level      = "1"
                                icon-collapse       = "fa fa-angle-down"
                                icon-expand    = "fa fa-angle-right"
                        >
                        </abn-tree>
                    </div>
                    <div  style="padding-left:10px;margin-bottom: 5px;"  >
                        <span class="text-info"   > <div class="text-info" style="padding-top:10px;padding-bottom:5px;"  ><b ><i class="fa fa-angle-down" ></i>&nbsp;&nbsp;{{'document.personalDirectory'|translate}}</b></div></span>
                        <abn-tree
                                tree-data         = "myFolders"
                                tree-control      = "myFolders_tree"
                                on-select         = "my_folder_handler(branch)"
                                expand-level      = "2"
                                icon-collapse       = "fa fa-angle-down"
                                icon-expand    = "fa fa-angle-right"
                        >
                        </abn-tree>
                    </div>
                    <div style="padding-left:10px;margin-bottom: 5px;"  >
                        <span class="text-info"  > <div style="padding-top:10px;padding-bottom:10px;"  ><b ><i class="fa fa-angle-down" ></i>&nbsp;&nbsp;{{'document.label'|translate}}</b></div></span>
                        <ul class="nav nav-pills nav-stacked nav-sm">
                            <li class="{{isFavorite ? 'active':''}}" >
                                <a ng-click="favoriteDocuments()"  >
                                    <span>{{'document.favoriteDocument'|translate}}</span>&nbsp;&nbsp;<i class="glyphicon glyphicon-star icon "></i>
                                    <i class="icon-check pull-right filter-close" ></i>
                                </a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="col" >
                <div class="wrapper bg-light lter b-b" style="height:61px;">
                    <ul class="breadcrumb" style="display: block;float:left;background:none;">
                        <li><a ui-sref="app.news" ><i class="iconfont icon-xinwen"></i> {{'aside.nav.news'|translate}}</a></li>
                        <li ng-show="folder!=null"  ><a ng-click="set_folder()" ><i class="iconfont icon-yunyingpan"></i> {{'aside.nav.documents'|translate}}</a></li>
                        <li class="active" ng-show="folder==null" ><i class="fa fa-file"></i> {{'aside.nav.documents'|translate}}</li>
                        <li ng-repeat="folder_url in folder_handler_branch.urlList" ><a ng-click="set_folder(folder_url.id)" >{{folder_url.name}}</a></li>
                        <li ng-repeat="folder_url in my_folder_handler_branch.urlList" ><a ng-click="set_folder(folder_url.id)" >{{folder_url.name}}</a></li>
                    </ul>
                    <div class="pull-right m-r-sm " style="margin-top: 8px;" >
                         <span ng-show="searchValue!=null&&searchValue!=''" >{{'common.search'|translate}} {{searchValue}}</span>{{folder_handler_branch.name}}{{my_folder_handler_branch.name}} {{'common.general'|translate}} {{totalCount}} {{'document.barDocument'|translate}}
                    </div>

                </div>

                    <div class="wrapper" style="background-color: #e4eaec;"  >
                        <a class="text-info btn-a m-r-sm"  ng-show="folder_handler_branch!=null&&folder_handler_branch.type==8"  ng-click="set_folder()" ><i class="fa fa-chevron-circle-left"  ></i> <span >{{'document.goBack'|translate}}</span></a>
                        <a class="text-info btn-a m-r-sm"  ng-show="my_folder_handler_branch!=null&&my_folder_handler_branch.type==4"  ng-click="set_folder()" ><i class="fa fa-chevron-circle-left"  ></i> <span >{{'document.goBack'|translate}}</span></a>
                        <a class="text-info btn-a m-r-sm"  ng-show="folder_handler_branch!=null&&folder_handler_branch.type!=8"  ng-click="set_folder(folder_handler_branch.parentId)" ><i class="fa fa-chevron-circle-left"  ></i> <span >{{'document.goBack'|translate}}</span></a>
                        <a class="text-info btn-a m-r-sm"  ng-show="my_folder_handler_branch!=null&&my_folder_handler_branch.type!=4"  ng-click="set_folder(my_folder_handler_branch.parentId)" ><i class="fa fa-chevron-circle-left"  ></i> <span >{{'document.goBack'|translate}}</span></a>
                        <a class="text-info btn-a m-r-sm" ng-show="folder==null" ng-click="isCreateKC=true;" ><i class="glyphicon glyphicon-plus-sign"  ></i> <span >{{'document.createKC'|translate}}</span></a>
                        <a class="text-info btn-a m-r-sm" ng-show="folder!=null" ng-click="isCreateFolder=true;" ><i class="glyphicon glyphicon-plus-sign"  ></i> <span >{{'document.createFolder'|translate}}</span></a>

                        <form ng-show="folder!=null" id="attachUploadImg0Form" style="display: inline;" action="/suite/plugins/servlet/uploadDocument" method="post"
                              enctype="multipart/form-data" target="ifm">
                            <input type="hidden" id="folder" name="folder" value="{{folder}}">
                            <a href="javascript:;" style="line-height: 0px;padding: 0px;" class="a-i-upload text-info btn-a m-r-sm" >
                                <input id="attachUploadImg0" name="uploadDocumentFile" type="file" flag="0"  onchange="angular.element(this).scope().selectedFile(this)"
                                                                              style="width:206px;" >
                                <i class="fa fa-cloud-upload"  ></i> <span >{{'document.uploadDocument'|translate}}</span>
                            </a>
                        </form>
                    </div>


                        <table class="table table-striped b-t b-light document-list">
                            <thead>
                            <tr>
                                <th style="width:20px;">
                                    <label class="i-checks m-b-none">
                                        <input type="checkbox" ng-click="isAllCheck ? isAllCheck=false : isAllCheck=true" ><i></i>
                                    </label>
                                </th>
                                <th>{{'document.table.name'|translate}}</th>
                                <th>{{'document.table.size'|translate}}</th>
                                <th>{{'document.table.createBy'|translate}}</th>
                                <th>{{'document.table.updateTime'|translate}}</th>
                                <th></th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr ng-show="isCreateKC"  style="background-color: #fafbfc;" >
                                <td><label class="i-checks m-b-none"><input type="checkbox" name="post[]" disabled><i></i></label></td>
                                <td colspan="3" >
                                    <div class="create-document-form-control" >
                                        <i class="icon-layers m-r-sm" ></i>
                                        <select id="isKCPublic" class="form-control m-r-sm" style="width: 80px;">
                                            <option selected="selected" value="public">{{'document.table.public'|translate}}</option>
                                            <option  value="personal">{{'document.table.personal'|translate}}</option>
                                        </select>
                                        <input type="text" ng-model="createKCName" style="width: 50%;" class="form-control m-r-xs"  placeholder="{{'document.table.kcName'|translate}}">
                                        <button type="button" ng-click="submitCreateContent(createKCName)" class="btn btn-sm btn-info m-r-xs">{{'common.ok'|translate}}</button>
                                        <button type="button" ng-click="isCreateKC=false;" class="btn btn-sm btn-default">{{'common.cancel'|translate}}</button>
                                    </div>
                                </td>
                                <td colspan="2" ></td>
                            </tr>
                            <tr ng-show="isCreateFolder" style="background-color: #fafbfc;" >
                                <td><label class="i-checks m-b-none"><input type="checkbox" name="post[]" disabled><i></i></label></td>
                                <td colspan="3">
                                    <div class="create-document-form-control" >
                                        <i class="fa fa-folder m-r-sm" ></i>
                                        <input type="text" ng-model="createFolderName" class="form-control m-r-xs"  placeholder="{{'document.table.folderName'|translate}}">
                                        <button type="button" ng-click="submitCreateContent(createFolderName)" class="btn btn-sm btn-info m-r-xs">{{'common.ok'|translate}}</button>
                                        <button type="button" ng-click="isCreateFolder=false;" class="btn btn-sm btn-default">{{'common.cancel'|translate}}</button>
                                    </div>
                                </td>
                                <td colspan="2" ></td>
                            </tr>
                            <tr   ng-repeat="documentsAndFolder in documentsAndFolders" >
                                <td><label class="i-checks m-b-none"><input type="checkbox" ng-checked="isAllCheck" name="post[]"><i></i></label></td>
                                <td style="padding-left: 0px;" ng-click="documentsAndFolder.type==1 ? documentsView(documentsAndFolder.id) : set_folder(documentsAndFolder.id);" >
                                    <a href ui-toggle-class style="font-size: 15px;" ng-click="$event.stopPropagation();setFavorite(documentsAndFolder.id,documentsAndFolder.favorite,documentsAndFolder.index)" class="m-xs {{documentsAndFolder.favorite ? 'active' : ''}}" >
                                        <i class="fa fa-star text-warning text-active" ></i>
                                        <i class="fa fa-star-o  text" style="color:#98a6ad;"  ></i>
                                    </a>&nbsp;
                                    <a  ng-show="!documentsAndFolder.isEdit&&(documentsAndFolder.type==4||documentsAndFolder.type==8)" >
                                        <i class="text-orange icon-layers m-r-sm" style="font-size: 23px;line-height: 10px;vertical-align: middle;" ></i>
                                        <span ng-bind-html="documentsAndFolder.label | limitTo:100"></span>
                                    </a>
                                    <a  ng-show="!documentsAndFolder.isEdit&&documentsAndFolder.type==2"  >
                                        <i class="text-info fa fa-folder m-r-sm" style="font-size: 30px;line-height: 10px;vertical-align: middle;" ></i>
                                        <span ng-bind-html="documentsAndFolder.label | limitTo:100"></span>
                                    </a>
                                    <a   ng-show="!documentsAndFolder.isEdit&&documentsAndFolder.type==1" >
                                        <span ng-show="documentsAndFolder.mimeType=='file'" >
                                            <span  class="m-r-sm bg-primary document-icon" >{{documentsAndFolder.ext}}</span>
                                            <span ng-bind-html="documentsAndFolder.label | limitTo:100"></span>.{{documentsAndFolder.ext}}
                                        </span>
                                        <span ng-show="documentsAndFolder.mimeType=='report'" >
                                            <i class="text-warning fa fa-bar-chart-o m-r-sm" style="font-size: 30px;line-height: 10px;vertical-align: middle;" ></i>
                                            <span ng-bind-html="documentsAndFolder.label | limitTo:100"></span>.{{documentsAndFolder.ext}}
                                        </span>
                                        <span ng-show="documentsAndFolder.mimeType=='preview'" >
                                            <span  class="m-r-sm bg-danger document-icon" >{{documentsAndFolder.ext}}</span>
                                            <span ng-bind-html="documentsAndFolder.label | limitTo:100"></span>.{{documentsAndFolder.ext}}
                                        </span>
                                        <span ng-show="documentsAndFolder.mimeType=='openOffice'" >
                                            <span  class="m-r-sm bg-danger document-icon" >{{documentsAndFolder.ext}}</span>
                                            <span ng-bind-html="documentsAndFolder.label | limitTo:100"></span>.{{documentsAndFolder.ext}}
                                        </span>
                                        <span ng-show="documentsAndFolder.mimeType=='video'" >
                                            <span  class="m-r-sm bg-dark document-icon" >{{documentsAndFolder.ext}}</span>
                                            <span ng-bind-html="documentsAndFolder.label | limitTo:100"></span>.{{documentsAndFolder.ext}}
                                        </span>
                                        <span ng-show="documentsAndFolder.mimeType=='image'" >
                                            <img ng-src="{{documentsAndFolder.mimeType=='image' ? '/suite/plugins/servlet/loadSource/'+documentsAndFolder.id+'?timestamp='+timestamp : ''}}" style="width: 38px;height: 38px;margin-right: 10px;" />
                                            <span ng-bind-html="documentsAndFolder.label | limitTo:100"></span>.{{documentsAndFolder.ext}}
                                        </span>
                                    </a>
                                    <div class="create-document-form-control" ng-show="documentsAndFolder.isEdit" >
                                        <input type="text" ng-click="$event.stopPropagation();" ng-model="documentsAndFolder.name" class="form-control m-r-xs"  value="{{documentsAndFolder.name}}">
                                        <button type="button" ng-click="$event.stopPropagation();submitUpdateContent(documentsAndFolder.index,documentsAndFolder.id,documentsAndFolder.type,documentsAndFolder.name)" class="btn btn-sm btn-info m-r-xs">{{'common.ok'|translate}}</button>
                                        <button type="button" ng-click="documentsAndFolder.isEdit=false;$event.stopPropagation();" class="btn btn-sm btn-default">{{'common.cancel'|translate}}</button>
                                    </div>

                                </td>
                                <td>{{documentsAndFolder.size}}</td>
                                <td>
                                    <a class="thumb-xs avatar m-r-xs">
                                        <img ng-src="/suite/plugins/servlet/getUserAvatar?user={{documentsAndFolder.creator}}" class="img-circle" alt="...">
                                        <!--<span class="image" style="background-image: url('/suite/plugins/servlet/getUserAvatar?user={{documentsAndFolder.creator}}')"></span>-->
                                    </a>
                                    {{documentsAndFolder.creatorFirstName}}
                                </td>
                                <td>{{documentsAndFolder.dateCreated}}</td>
                                <td class="actions"  >

                                    <a ui-sref="app.news({docId:documentsAndFolder.id,userId:'-1'})" ng-show="documentsAndFolder.type==1" ><i class="fa fa-share-alt icon-max m-r-sm" tooltip-placement="top" tooltip="{{'document.table.shareToNews'|translate}}" ></i></a>
                                    <a ng-href="/suite/doc/{{documentsAndFolder.id}}" ng-show="documentsAndFolder.type==1" ><i class="fa fa-cloud-download icon-max m-r-sm" tooltip-placement="top" tooltip="{{'document.table.dowloadDoc'|translate}}" ></i></a>
                                    <a ng-click="documentsAndFolder.isEdit ? documentsAndFolder.isEdit=false : documentsAndFolder.isEdit=true" ng-show="documentsAndFolder.creator==userInfo.userName" tooltip-placement="top" tooltip="{{'document.table.edit'|translate}}"><i style="font-size: 18px;"  class="fa fa-pencil icon-max m-r-sm" ></i></a>
                                    <a ng-click="moveDocument(documentsAndFolder.id,documentsAndFolder.type,documentsAndFolder.name)" ng-show="documentsAndFolder.creator==userInfo.userName" tooltip-placement="top" tooltip="{{'document.table.move'|translate}}" ><i style="font-size: 18px;" class="iconfont icon-yidongdao-copy icon-max m-r-sm" ></i></a>
                                    <a ng-click="deleteContent(documentsAndFolder.id)" ng-show="documentsAndFolder.creator==userInfo.userName" tooltip-placement="top" tooltip="{{'document.table.delete'|translate}}" ><i style="font-size: 18px;" class="fa fa-trash-o icon-max" ></i></a>
                                </td>
                            </tr>
                            <tr ng-show="documentsAndFolders.length==0" >
                                <td colspan="6" style="background-color: #f0f3f4;" >
                                     <div   style="text-align: center;margin-top: 30px;" ><i class="iconfont  icon-meiyousoudaoxinxi" style="font-size: 23px;" ></i>&nbsp;&nbsp;{{'document.noDocuments'|translate}}...</div>
                                </td>
                            </tr>
                            </tbody>

                        </table>


            </div>
        </div>
    </div>

</div>